
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>留言板</title>

    <!-- Bootstrap core CSS -->
    <link href="./Tpl/css/bootstrap.min.css" rel="stylesheet">


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">留言板</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        <?php if(isset($_SESSION['username'])){ ?>
          <div class="navbar-form navbar-right">
            <span class='btn btn-success'><?php echo $_SESSION['username'] ?></span>
            <a href="./loginout.php" class="btn btn-success">退出</a>
          </div>

        <?php  }else{ ?>

        
          <form action="./login.php" class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">登录</button>
            <a href="./reg.php"  class="btn btn-success">注册</a>
          </form>
        <?php  } ?>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <style type="text/css">
          .glyphicon-ok{
            color: green;
          }
          .glyphicon-remove{
            color: red;
          }

      </style>
      <div class="row">
        	<div class="list-group col-md-8">
        		  <form class="form-horizontal" role="form" method="post" action="./adduser.php">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-5">
                  <input type="text" class="form-control" id="usrename" name="username" placeholder="用户名">
                </div>
                <div class="col-sm-5 info"></div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-5">
                  <input type="password" name="password" class="form-control" id="inputPassword3" placeholder="密码">
                </div>
                <div class="col-sm-5 info">
                  <span class="glyphicon glyphicon-remove"></span>密码不合法，需要是XXX
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-5">
                  <input type="password" name="password2" class="form-control" id="inputPassword3" placeholder="确认密码">
                </div>
                <div class="col-sm-5 info">
                  <span class="glyphicon glyphicon-remove"></span>密码不合法，需要是XXX
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                  <label class="radio-inline">
                    <input type="radio" name="sex" id="inlineRadio1" value="男"> 男
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="sex" id="inlineRadio2" value="女"> 女
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="sex" id="inlineRadio3" value="人妖"> 人妖
                  </label>
                </div>
              </div>
              
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-5">
                  <input type="email" class="form-control" id="inputEmail3" name="email" placeholder="邮箱">
                </div>
                <div class="col-sm-5 info">
                  <span class="glyphicon glyphicon-remove"></span>密码不合法，需要是XXX
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> 记得我
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-success" disabled="">注册</button>
                </div>
              </div>
            </form>
			     </div>
			
        
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="./Tpl/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script type="text/javascript">
      $(function  () {
          $('#usrename').blur(function(event) {
              obj = $(this);
              data =  $(this).val();
              $.ajax({
                url: './checkdata.php',
                type: 'post',
                dataType: 'json',
                data: {username: data},
              })
              .done(function(response) {
                  if(response.error==0){
                     obj.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove"></span>'+response.info); 
                  }else{
                    obj.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok"></span>'+response.info);
                  }
              })
              .fail(function() {
                alert("error");
              })
              
            
          });
      })
    </script>
  </body>
</html>
